<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片批量处理工具</title>
    <!-- Bootstrap CSS (国内CDN) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (国内CDN) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 自定义标题栏 -->
    <div class="custom-titlebar" id="titlebar">
        <div class="titlebar-content">
            <div class="titlebar-title">
                <i class="bi bi-image me-2"></i>
                <span class="title-text">图片批量处理工具</span>
                <span class="subtitle-text">支持格式转换、压缩和尺寸调整</span>
            </div>
            <div class="titlebar-controls">
                <button id="minimizeApp" class="titlebar-btn" title="最小化">
                    <!-- <i class="bi bi-dash"></i> -->
                     👇
                </button>
                <button id="maximizeApp" class="titlebar-btn" title="最大化">
                    <!-- <i class="bi bi-square"></i> -->
                     👆
                </button>
                <button id="closeApp" class="titlebar-btn close-btn" title="关闭">
                    <!-- <i class="bi bi-x"></i> -->
                     ❌
                </button>
            </div>
        </div>
    </div>


    <main class="main-content bg-white">
        <div class="row g-4">
            <!-- 左侧：处理选项 -->
            <div class="col-6">
                <section class="processing-options">
                    <h2 class="section-title h4 mb-4">
                        <i class="bi bi-gear-fill me-2"></i>
                        处理选项
                    </h2>

                    <div class="row g-3">
                        <!-- 格式转换 -->
                        <div class="col-12">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="bi bi-arrow-repeat me-2"></i>
                                        格式转换
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label mb-3">输出格式:</label>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatOriginal" value="" checked>
                                                    <label class="form-check-label" for="formatOriginal">
                                                        <i class="bi bi-file-earmark me-1"></i>
                                                        保持原格式
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatJpeg" value="jpeg">
                                                    <label class="form-check-label" for="formatJpeg">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        JPEG
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatPng" value="png">
                                                    <label class="form-check-label" for="formatPng">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        PNG
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatWebp" value="webp">
                                                    <label class="form-check-label" for="formatWebp">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        WebP
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatTiff" value="tiff">
                                                    <label class="form-check-label" for="formatTiff">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        TIFF
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatGif" value="gif">
                                                    <label class="form-check-label" for="formatGif">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        GIF
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="outputFormat"
                                                        id="formatBmp" value="bmp">
                                                    <label class="form-check-label" for="formatBmp">
                                                        <i class="bi bi-file-image me-1"></i>
                                                        BMP
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 压缩设置 -->
                                    <div id="compressionSettings" style="display: none;">
                                        <hr class="my-3">
                                        <div class="mb-3">
                                            <label for="quality" class="form-label">
                                                <i class="bi bi-file-zip me-2"></i>
                                                质量 (<span id="qualityValue">100</span>%):
                                            </label>
                                            <input type="range" id="quality" class="form-range" min="1" max="100"
                                                value="100">
                                            <small class="form-text text-muted">100%为原始质量，不进行压缩</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 尺寸调整 -->
                        <div class="col-12">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="bi bi-aspect-ratio me-2"></i>
                                        尺寸调整
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3 mb-3">
                                        <div class="col-6">
                                            <label for="width" class="form-label">宽度 (px或%):</label>
                                            <input type="text" id="width" class="form-control"
                                                placeholder="如: 800 或 50%">
                                        </div>
                                        <div class="col-6">
                                            <label for="height" class="form-label">高度 (px或%):</label>
                                            <input type="text" id="height" class="form-control"
                                                placeholder="如: 600 或 75%">
                                        </div>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="maintainAspectRatio"
                                            checked>
                                        <label class="form-check-label" for="maintainAspectRatio">
                                            保持宽高比
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 图片裁剪 -->
                        <div class="col-12">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="bi bi-crop me-2"></i>
                                        图片裁剪
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="enableCrop">
                                        <label class="form-check-label" for="enableCrop">
                                            启用图片裁剪
                                        </label>
                                    </div>
                                    
                                    <div id="cropSettings" style="display: none;">
                                        <div class="mb-3">
                                            <label class="form-label mb-3">裁剪比例 (宽:高):</label>
                                            <div class="row g-2">
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio43" value="4:3">
                                                        <label class="form-check-label" for="ratio43">
                                                            <i class="bi bi-aspect-ratio me-1"></i>
                                                            4:3
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio34" value="3:4">
                                                        <label class="form-check-label" for="ratio34">
                                                            <i class="bi bi-phone me-1"></i>
                                                            3:4
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio32" value="3:2">
                                                        <label class="form-check-label" for="ratio32">
                                                            <i class="bi bi-aspect-ratio me-1"></i>
                                                            3:2
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio23" value="2:3">
                                                        <label class="form-check-label" for="ratio23">
                                                            <i class="bi bi-phone me-1"></i>
                                                            2:3
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio54" value="5:4">
                                                        <label class="form-check-label" for="ratio54">
                                                            <i class="bi bi-aspect-ratio me-1"></i>
                                                            5:4
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio45" value="4:5">
                                                        <label class="form-check-label" for="ratio45">
                                                            <i class="bi bi-phone me-1"></i>
                                                            4:5
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio169" value="16:9">
                                                        <label class="form-check-label" for="ratio169">
                                                            <i class="bi bi-display me-1"></i>
                                                            16:9
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio916" value="9:16">
                                                        <label class="form-check-label" for="ratio916">
                                                            <i class="bi bi-phone me-1"></i>
                                                            9:16
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratio11" value="1:1">
                                                        <label class="form-check-label" for="ratio11">
                                                            <i class="bi bi-square me-1"></i>
                                                            1:1
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropRatio"
                                                            id="ratioCustom" value="custom">
                                                        <label class="form-check-label" for="ratioCustom">
                                                            <i class="bi bi-gear me-1"></i>
                                                            自定义
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 自定义比例设置 -->
                                        <div id="customRatioSettings" class="mb-3" style="display: none;">
                                            <hr class="my-3">
                                            <div class="row g-3">
                                                <div class="col-6">
                                                    <label for="customWidth" class="form-label">开始位置 - 距离左边:</label>
                                                    <input type="number" id="cropLeft" class="form-control" value="0" min="0"
                                                        placeholder="像素值">
                                                </div>
                                                <div class="col-6">
                                                    <label for="customHeight" class="form-label">开始位置 - 距离顶部:</label>
                                                    <input type="number" id="cropTop" class="form-control" value="0" min="0"
                                                        placeholder="像素值">
                                                </div>
                                            </div>
                                            <div class="row g-3 mt-2">
                                                <div class="col-6">
                                                    <label for="cropWidth" class="form-label">裁剪宽度:</label>
                                                    <input type="number" id="cropWidth" class="form-control" min="1"
                                                        placeholder="像素值">
                                                </div>
                                                <div class="col-6">
                                                    <label for="cropHeight" class="form-label">裁剪高度:</label>
                                                    <input type="number" id="cropHeight" class="form-control" min="1"
                                                        placeholder="像素值">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 裁剪位置 -->
                                        <div id="cropPositionSettings" class="mb-3">
                                            <hr class="my-3">
                                            <label class="form-label mb-3">裁剪位置:</label>
                                            <div class="row g-2">
                                                <div class="col-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropPosition"
                                                            id="positionCenter" value="center" checked>
                                                        <label class="form-check-label" for="positionCenter">
                                                            <i class="bi bi-bullseye me-1"></i>
                                                            居中
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropPosition"
                                                            id="positionTop" value="top">
                                                        <label class="form-check-label" for="positionTop">
                                                            <i class="bi bi-arrow-up me-1"></i>
                                                            顶部
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropPosition"
                                                            id="positionBottom" value="bottom">
                                                        <label class="form-check-label" for="positionBottom">
                                                            <i class="bi bi-arrow-down me-1"></i>
                                                            底部
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropPosition"
                                                            id="positionLeft" value="left">
                                                        <label class="form-check-label" for="positionLeft">
                                                            <i class="bi bi-arrow-left me-1"></i>
                                                            左侧
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="cropPosition"
                                                            id="positionRight" value="right">
                                                        <label class="form-check-label" for="positionRight">
                                                            <i class="bi bi-arrow-right me-1"></i>
                                                            右侧
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 右侧：文件选择和列表 -->
            <div class="col-6">
                <!-- 文件选择区域 -->
                <section class="file-selection mb-4">
                    <h2 class="section-title h4 mb-4">
                        <i class="bi bi-folder2-open me-2"></i>
                        选择图片
                    </h2>

                    <!-- 融合的拖拽和选择区域 -->
                    <div id="dropZone"
                        class="unified-drop-zone border-3 border-dashed rounded-3 p-4 text-center bg-light mb-4">
                        <div class="drop-zone-content">
                            <i class="bi bi-cloud-arrow-down display-1 text-primary mb-3"></i>
                            <div class="mb-3">
                                <p class="h5 mb-2 text-primary">拖拽图片文件到这里</p>
                                <p class="mb-2 text-muted">或者点击下方按钮选择文件</p>
                                <small class="text-muted d-block">支持 JPG, PNG, GIF, BMP, TIFF, WEBP, SVG, ICO</small>
                            </div>

                            <!-- 内嵌的选择按钮 -->
                            <div class="row g-2 mt-3">
                                <div class="col-6">
                                    <button id="selectFiles" class="btn btn-primary w-100 py-2">
                                        <i class="bi bi-images me-2"></i>
                                        选择文件
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button id="selectFolder" class="btn btn-primary w-100 py-2">
                                        <i class="bi bi-folder-fill me-2"></i>
                                        选择文件夹
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 文件数量显示区域 -->
                <section class="file-count-section mb-4">
                    <div id="fileCountDisplay" class="file-count-display text-center" data-bs-toggle="modal"
                        data-bs-target="#fileListModal">
                        <div class="file-count-content">
                            <i class="bi bi-list-ul fs-1 text-primary mb-2"></i>
                            <h5 class="mb-2">已选择 <span id="fileCount">(0)</span>文件</h5>

                            <p class="text-muted mt-2 mb-0 small">点击查看文件列表</p>
                        </div>
                    </div>
                </section>

                <!-- 处理按钮 -->
                <section class="process-button-section mb-4">
                    <div class="row g-3">
                        <div class="col-12">
                            <button id="processBtn" class="btn btn-success w-100 py-3" disabled>
                                <i class="bi bi-lightning-charge me-2"></i>
                                选择图片后开始处理
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>



        <!-- 处理按钮和进度 -->
        <section class="processing-section text-center mb-4">


            <div id="progressSection" class="mt-4" style="display: none;">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span id="progressText" class="fw-medium">准备中...</span>
                    <span id="progressPercent" class="badge bg-primary">0%</span>
                </div>
                <div class="progress" style="height: 12px;">
                    <div id="progressFill" class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                        role="progressbar" style="width: 0%"></div>
                </div>
            </div>
        </section>

        <!-- 文件列表浮窗 -->
        <div id="fileListModal" class="modal fade" tabindex="-1" aria-labelledby="fileListModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="fileListModalLabel">
                            <i class="bi bi-list-ul me-2"></i>
                            选中的文件列表
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div id="fileList" class="file-list" style="max-height: 500px; overflow-y: auto;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-2"></i>
                            关闭
                        </button>
                        <button id="clearAllFiles" class="btn btn-outline-danger">
                            <i class="bi bi-trash me-2"></i>
                            清空所有文件
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 完成提示框 -->
        <div id="completionModal" class="modal fade" tabindex="-1" aria-labelledby="completionModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="completionModalLabel">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            转换完成
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body text-center">
                        <div class="mb-4">
                            <i class="bi bi-check-circle-fill text-success" style="font-size: 3rem;"></i>
                        </div>
                        <p id="completionMessage" class="h6 mb-4">XX张图片已转换完成，耗时X秒</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button id="replaceOriginalBtn" class="btn btn-warning me-2">
                            <i class="bi bi-arrow-repeat me-2"></i>
                            替换原文件
                        </button>
                        <button id="viewResultsBtn" class="btn btn-primary">
                            <i class="bi bi-folder2-open me-2"></i>
                            查看转换结果
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>


    <!-- Bootstrap JS (国内CDN) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="renderer.js"></script>
</body>

</html>